<template>
	<view class="content">
		<textarea auto-height="true" v-model="message" placeholder="新消息" placeholder-style="color:#999999;" 
		:cursor-spacing="screen_width" maxlength="-1" @confirm="send" @input="inputclick" :show-confirm-bar="showbar" disable-default-padding="true" />
		<text class="send" :class="isactive?'active':''" @click="send">发送</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				message:'',
				isactive:false,
				showbar:false
			};
		},
		props:{
			screen_width:{
				type: String,
				default () {
					return 25;
				}
			}
		},
		methods:{
			send(){
				if(this.$u.trim(this.message, 'left') == ''){
					
				}else{
					this.isactive = true
					this.$emit('send',this.message)
					this.message = ''
					this.isactive = false
				}
			},
			inputclick(){
				if(this.$u.trim(this.message, 'left') == ''){
					this.isactive = false
				}else{
					this.isactive = true
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		min-height: 110rpx;
		display: flex;
		align-items: center;
		padding: 25rpx 30rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		.send{
			width: 96rpx;
			height: 60rpx;
			font-size: 26rpx;
			color: #fff;
			background: #00BA3B;
			text-align: center;
			line-height: 60rpx;
			border-radius: 4rpx;
			opacity: 0.5;
			margin-left: 20rpx;
		}
		.active{
			background: #00BA3B;
			color: #fff;
			opacity: 1;
		}
	}
		
	/deep/u-input{
		height: 60rpx!important;
		width: 574rpx!important;
		background: #F4F6F8!important;
		border-radius: 4rpx!important;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		input{
			min-height: unset!important;
		}
	}
	.u-input  /deep/ .u-input__right-icon{
		display: none;
	}
	
	textarea{
		min-height: 60rpx!important;
		width: 574rpx!important;
		background: #F4F6F8!important;
		border-radius: 4rpx!important;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
	}
</style>
